<template>
    <div v-if="fomotip.id == '3'" style="width: 100%;margin-top: 30px;">
        <div style="width: 120%;">
            <table border="1" class="efomo-table-tit">
                <tbody>
                <tr>
                    <th style="width: 100%;">
                        <span>{{$t('m.efomo.table.tit')[0]}}</span>
                    </th>
                </tr>
                </tbody>
            </table>
            <table border="1" class="efomo-tit" style="width: 100%;">
                <tbody>
                <tr>
                    <th style="width: 50%;">
                        <span>{{$t('m.efomo.table.subtit')[0]}}</span>
                    </th>
                    <th style="width: 50%;">
                        <span>{{$t('m.efomo.table.subtit')[1]}}</span>
                    </th>
                </tr>
                </tbody>
            </table>
            <table border="1" class="efomo-sub-tit" style="width: 100%;">
                <tbody>
                <tr>
                    <th>
                        <span>{{$t('m.efomo.table.subtit')[2]}}</span>
                    </th>
                    <th>
                        <span>{{$t('m.efomo.table.subtit')[3]}}</span>
                    </th>
                    <th>
                        <span>{{$t('m.efomo.table.subtit')[4]}}</span>
                    </th>
                    <th>
                        <span>{{$t('m.efomo.table.subtit')[5]}}</span>
                    </th>
                    <th>
                        <span>{{$t('m.efomo.table.subtit')[6]}}</span>
                    </th>
                </tr>
                </tbody>
            </table>
            <table border="1" class="efomo-list" style="width: 100%;">
                <tbody>
                <tr v-for="v in staticList">
                    <td>
                        <span>{{v.biling}}</span>
                    </td>
                    <td>
                        <span>{{v.magnification}}</span>
                    </td>
                    <td><span>{{v.value}}</span></td>
                    <td><span>{{v.position}}</span></td>
                    <td><span>{{v.percentage}}%</span></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div style="width: 120%;" class="dynamic-list">
            <table border="1">
                <tbody>
                <tr>
                    <th>
                        <span>{{$t('m.efomo.table.tit')[1]}}</span>
                    </th>
                </tr>
                </tbody>
            </table>
            <table border="1">
                <tbody>
                <tr>
                    <th>
                        <span style="color: red;">{{$t('m.efomo.table.subtit')[8]}}</span>
                    </th>
                    <th>
                        <span>1</span>
                    </th>
                    <th>
                        <span>2</span>
                    </th>
                    <th>
                        <span>3</span>
                    </th>
                    <th>
                        <span>4</span>
                    </th>
                    <th>
                        <span>5</span>
                    </th>
                    <th>
                        <span>≥6</span>
                    </th>
                </tr>
                </tbody>
            </table>
            <table border="1">
                <tbody>
                <tr v-for="v in dynamicList">
                    <td>
                        <span>{{v.userNum}}{{$t('m.efomo.table.subtit')[9]}}</span>
                    </td>
                    <td>
                        <span>{{v.one}}</span>
                    </td>
                    <td>
                        <span>{{v.two}}</span>
                    </td>
                    <td>
                        <span>{{v.three}}</span>
                    </td>
                    <td>
                        <span>{{v.four}}</span>
                    </td>
                    <td>
                        <span>{{v.five}}</span>
                    </td>
                    <td>
                        <span>{{v.six}}</span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div v-else style="width: 100%;margin-top: 30px;">
        <div class="efomo-table-income">
            <table border="1" class="efomo-table-tit">
                <tbody>
                <tr>
                    <th>
                        <span>{{$t('m.efomo.table.tit')[2]}}</span>
                    </th>
                </tr>
                </tbody>
            </table>
            <table border="1">
                <tbody>
                <tr>
                    <th>
                        <span>{{$t('m.efomo.table.subtit')[2]}}</span>
                    </th>
                    <th>
                        <span>{{$t('m.efomo.table.subtit')[3]}}</span>
                    </th>
                    <th>
                        <span>{{$t('m.efomo.table.subtit')[7]}}</span>
                    </th>
                </tr>
                </tbody>
            </table>
            <table border="1">
                <tbody>
                <tr v-for="v in incomeList">
                    <td>
                        <span>{{v.biling}}</span>
                    </td>
                    <td>
                        <span>{{v.magnification}}</span>
                    </td>
                    <td>
                        <span>{{v.incomeNum}}</span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    /* eslint-disable */
    export default {
        name: "efomo_table",
        data() {
            return {
                staticList: [
                    {
                        biling: '1',
                        magnification: '2',
                        value: '1000',
                        position: '<500',
                        percentage: '0.00'
                    },
                    {
                        biling: '2',
                        magnification: '2.1',
                        value: '2100',
                        position: '500',
                        percentage: '1.00'
                    },
                    {
                        biling: '3',
                        magnification: '2.2',
                        value: '3300',
                        position: '1000',
                        percentage: '1.05'
                    },
                    {
                        biling: '4',
                        magnification: '2.3',
                        value: '4600',
                        position: '1500',
                        percentage: '1.10'
                    },
                    {
                        biling: '5',
                        magnification: '2.4',
                        value: '6000',
                        position: '2000',
                        percentage: '1.15'
                    },
                    {
                        biling: '6',
                        magnification: '2.5',
                        value: '7500',
                        position: '2500',
                        percentage: '1.20'
                    },
                    {
                        biling: '7',
                        magnification: '2.6',
                        value: '9100',
                        position: '3000',
                        percentage: '1.25'
                    },
                    {
                        biling: '8',
                        magnification: '2.7',
                        value: '10800',
                        position: '3500',
                        percentage: '1.30'
                    },
                    {
                        biling: '9',
                        magnification: '2.8',
                        value: '12600',
                        position: '4000',
                        percentage: '1.35'
                    },
                    {
                        biling: '10-19',
                        magnification: '2.9',
                        value: '14500',
                        position: '4500',
                        percentage: '1.40'
                    },
                    {
                        biling: '20<=N<=200',
                        magnification: '3',
                        value: '1500*N',
                        position: '5000',
                        percentage: '1.50'
                    },
                    {
                        biling: '',
                        magnification: '',
                        value: '',
                        position: '>=10000',
                        percentage: '1.60'
                    }
                ],
                dynamicList: [
                    {
                        userNum: '1',
                        one: '25%',
                        two: '25%',
                        three: '25%',
                        four: '25%',
                        five: '25%',
                        six: '25%'
                    },
                    {
                        userNum: '2',
                        one: '20%',
                        two: '20%',
                        three: '20%',
                        four: '20%',
                        five: '20%',
                        six: '20%'
                    },
                    {
                        userNum: '3',
                        one: '-',
                        two: '10%',
                        three: '10%',
                        four: '10%',
                        five: '10%',
                        six: '10%'
                    },
                    {
                        userNum: '4',
                        one: '-',
                        two: '5%',
                        three: '5%',
                        four: '5%',
                        five: '5%',
                        six: '5%'
                    },
                    {
                        userNum: '5',
                        one: '-',
                        two: '-',
                        three: '5%',
                        four: '5%',
                        five: '5%',
                        six: '5%'
                    },
                    {
                        userNum: '6',
                        one: '-',
                        two: '-',
                        three: '5%',
                        four: '5%',
                        five: '5%',
                        six: '5%'
                    },
                    {
                        userNum: '7',
                        one: '-',
                        two: '-',
                        three: '-',
                        four: '5%',
                        five: '5%',
                        six: '5%'
                    },
                    {
                        userNum: '8',
                        one: '-',
                        two: '-',
                        three: '-',
                        four: '5%',
                        five: '5%',
                        six: '5%'
                    },
                    {
                        userNum: '9',
                        one: '-',
                        two: '-',
                        three: '-',
                        four: '-',
                        five: '5%',
                        six: '5%'
                    },
                    {
                        userNum: '10',
                        one: '-',
                        two: '-',
                        three: '-',
                        four: '-',
                        five: '5%',
                        six: '5%'
                    },
                    {
                        userNum: '11',
                        one: '-',
                        two: '-',
                        three: '-',
                        four: '-',
                        five: '-',
                        six: '5%'
                    },
                    {
                        userNum: '12',
                        one: '-',
                        two: '-',
                        three: '-',
                        four: '-',
                        five: '-',
                        six: '5%'
                    }
                ],
                incomeList: [
                    {
                        biling: '1',
                        magnification: '2',
                        incomeNum: '1000'
                    },
                    {
                        biling: '2',
                        magnification: '2.1',
                        incomeNum: '2100'
                    },
                    {
                        biling: '3',
                        magnification: '2.2',
                        incomeNum: '3300'
                    },
                    {
                        biling: '4',
                        magnification: '2.3',
                        incomeNum: '4600'
                    },
                    {
                        biling: '5',
                        magnification: '2.4',
                        incomeNum: '6000'
                    },
                    {
                        biling: '6',
                        magnification: '2.5',
                        incomeNum: '7500'
                    },
                    {
                        biling: '7',
                        magnification: '2.6',
                        incomeNum: '9100'
                    },
                    {
                        biling: '8',
                        magnification: '2.7',
                        incomeNum: '10800'
                    },
                    {
                        biling: '9',
                        magnification: '2.8',
                        incomeNum: '12600'
                    },
                    {
                        biling: '10-19',
                        magnification: '2.9',
                        incomeNum: '14500'
                    },
                    {
                        biling: '20<=N<=200',
                        magnification: '3',
                        incomeNum: '1500*N'
                    }
                ]
            }
        }
    }
</script>

<style lang="scss" scoped>
    .efomo-table-tit {
        text-align: center;
        width: 100%;
        line-height: .8rem;
    }

    table {
        width: 100%;
    }

    tr {
        th, td {
            text-align: center;
        }
        span {
            display: block;
            margin: 0 .1rem;
        }
    }

    .efomo-list, .efomo-sub-tit {
        th:first-child, td:first-child {
            width: 34%;
        }
        th:nth-of-type(2), td:nth-of-type(2) {
            width: 12%;
        }
        th:nth-of-type(3), td:nth-of-type(3) {
            width: 20%;
        }
        th:nth-of-type(4), td:nth-of-type(4) {
            width: 20%;
        }
    }

    .dynamic-list {
        text-align: center;
        margin: 30px 0;
        table:first-child {
            width: 100%;
        }
        table:nth-of-type(2) {
            th:first-child {
                width: 30%;
            }
            th {
                width: 10%;
            }
        }
        table:nth-of-type(3) {
            td:first-child {
                width: 45%;
            }
            td {
                width: 10%;
            }
        }
    }

    .efomo-table-income {
        text-align: center;
        margin: 30px 0;
        table:nth-of-type(2), table:nth-of-type(3) {
            th:first-child, th:last-child {
                width: 45%;
            }
            td:first-child, td:last-child {
                width: 45%;
            }
        }
    }
</style>